<template>
    <div style="overflow: auto;">
        <div>
            <span style="display: inline-block; font-size: 14px;">{{$t('overdueData.channelAuth')}}：</span>
            <el-select v-model='listQuery.channel' size='small'>
                <el-option
                v-for='item in business'
                :key='item.channel'
                :label='item.org_name'
                :value='item.channel'>
                </el-option>
            </el-select>
            <el-button type="primary" size="small" @click="search">{{$t('btn.query')}}</el-button>
        </div>
        <line-chart :data-all="dataAll"></line-chart>
    </div>
</template>

<script>
import { getChannels} from 'api/customQuery/index'
import { overdueRateData } from 'api/synManager/overdueData'
    export default {
        data() {
            return {
                business: [],
                listQuery: {
                    flag: 'month',
                    channel: ""
                },
                dataAll: []
            }
        },
        components: {
            'line-chart': () => import('./lineChart')
        },
        created() {
            this.getChannel();
            setTimeout(() => {
                this.getData()
            }, 500)
        },
        methods: {
            // 渠道下拉
            getChannel() {
                getChannels()
                .then(response => {
                    this.business = response.data;
                    this.listQuery.channel = response.data[0].channel
                })
            },
            getData() {
                overdueRateData(this.listQuery)
                .then(res => {
                    if (res.status === 200) {
                        this.dataAll = res.data[0].overdueRateDataDetails
                    }
                })
            },
            search() {
                this.getData()
            }
        }
    }
</script>

<style scoped>

</style>